<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块一简答题</title>
    <style>
      table {
          border-collapse: collapse;
          width: 500px;
      }
      thead {
          background-color: pink;
      }
      tr td {
          font-size: 10px;
      }
      .pink {
          background-color: skyblue;
      }
      .yellow {
          background-color: yellow;
      }
      .center {
          background-color: yellow;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
      }
      #green {
          background-color:green;
          font-size: 9px;
      }
      strong {
          color:red;
      }
    </style>
</head>
<body>
    <h3>1.input标签的type属性值（五种以上描述：属性值--描述)?</h3>
    <table border="1">
        <caption>&lt;input&gt;标签的常用属性</caption>
        <thead>
            <tr>
                <th>属性名</th>
                <th>属性值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="10">type</td>
                <td>text</td>
                <td>单行输入文本框</td>
            </tr>
            <tr>
                <td>password</td>
                <td>密码输入框</td>
            </tr>
            <tr>
                <td>radio</td>
                <td>单选框</td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>复选框</td>
            </tr>
            <tr>
                <td>button</td>
                <td>普通按钮</td>
            </tr>
            <tr>
                <td>reset</td>
                <td>重置按钮</td>
            </tr>
            <tr>
                <td>submit</td>
                <td>提交按钮</td>
            </tr>
            <tr>
                <td>image</td>
                <td>图片形式的按钮</td>
            </tr>
            <tr>
                <td>file</td>
                <td>定义输入字段和"浏览"按钮，供文件上传。</td>
            </tr>
            <tr>
                <td>hidden</td>
                <td>定义隐藏的输入字段</td>
            </tr>
            <tr>
                <td>name</td>
                <td>自定义</td>
                <td>定义控件的名称</td>
            </tr>
            <tr>
                <td>value</td>
                <td>自定义</td>
                <td>定义控件的默认文本值</td>
            </tr>
            <tr>
                <td>size</td>
                <td>数字</td>
                <td>定义控件的宽度</td>
            </tr>
            <tr>
                <td>checked</td>
                <td>checked</td>
                <td>定义选框控件的默认被选中项</td>
            </tr>
            <tr>
                <td>maxlength</td>
                <td>数字</td>
                <td>定义允许输入的最多字符数</td>
            </tr>
        </tbody>
    </table><br/>
    <h3>2.什么是表单（组成---功能---作用)?</h3>
    <table border="1">
        <caption>表单的介绍</caption>
        <thead class="pink">
            <tr>
                <th colspan="3">表单</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>组成</td>
                <td>功能</td>
                <td>作用</td>

            </tr>
            <tr>
                <td>表单域</td>
                <td>相当于一个容器，用来用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据作用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。</td>
                <td rowspan="3">用于收集用户的信息提交到数据库。</td>
            </tr>
            <tr>
                <td>表单控件（元素）</td>
                <td>包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。</td>
            </tr>
            <tr>
                <td>提示文本</td>
                <td>一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。</td>
            </tr>
        </tbody>
    </table><br/>
    <h3>3. 说一下你了解到的label标签及其绑定方式?</h3>
    <table border="1">
        <thead class="yellow">
            <tr>
                <th>我了解到的label标签：</th>
                <th>备注</th>
            </tr>
        </thead>
        <tr>
            <td>1.在html中，&lt;label&gt;标签通常和&lt;input&gt;标签一起使用，&lt;label&gt;标签为input元素定义标注（标记）。</td>
            <td rowspan="3">“文本”也可添加其它与label标签相关内容的图片或者其他来表现。</td>
        </tr>
        <tr>
            <td> 2. &lt;label&gt;标签的作用是为鼠标用户改进了可用性，当用户点击&lt;label&gt;标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上。</td>
        </tr>
        <tr>
            <td>3.<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。</td>
        </tr>
        <tr class="center">
            <td colspan="2">label标签绑定方式：</td>
        </tr>
        <tr>
            <td><strong>第一种：label for 方式</strong></td>
            <td rowspan="4">for属性值=id属性值</td>
        </tr>
        <r>
            <td>1.给表单元素设置id属性。<br>
                例如： &lt;input type="raido" name="sex" id="boy"/&gt;
            </td>
        </r>
        <tr>
            <td>2.然后将需要绑定的其他内容用&lt;label&gt;标签包裹。</td>
        </tr>
        <tr>
            <td>3.&lt;给label&gt;标签设置for属性，属性值为绑定的表单元素的id属性值。<br/>
                例如： &lt;label for="boy"&gt;男 &lt;/label&gt;</td>
        </tr>
        <tr>
            <td><strong>第二种：直接把input标签包裹在label标签内</strong></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td>直接使用&lt;label&gt;标签将绑定内容与表单元素一起进行嵌套。<br/>
                例如： &lt;label&gt;&lt;input type="checkbox" name="hobby"&gt;绘画&lt;label&gt;
            </td>
        </tr>
    </table><br/>
    <h3>4. CSS2.1版本的七种选择器分为哪两类，分别都是什么?</h3>
    <table border="1">
        <caption>CSS2.1版本的七种选择器</caption>
        <thead  id="green">
            <th>选择器种类</th>
            <th>类型</th>
            <th>描述</th>
            <th>书写方式</th>
            <th>备注</th>
        </thead>
        <tr>
            <td rowspan="5">基础选择器</td> 
        </tr>
        <tr>
            <td>标签选择器</td>
            <td>通过标签名去选择标签元素</td>
            <td>标签名</td>
            <td>选中标签全选</td>
        </tr>
        <tr>
            <td>id选择器</td>
            <td>通过标签上的id属性去选择标签</td>
            <td>#id属性值</td>
            <td>只能选中一个标签</td>
        </tr>
        <tr>
            <td>类选择器</td>
            <td>通过class属性去选择标签</td>
            <td>.class属性值</td>
            <td>页面中所有class属性值相同的标签</td>
        </tr>
        <tr>
            <td>通配符选择器</td>
            <td>通过一个特殊符号选择页面内的所有标签</td>
            <td>*</td>
            <td>包含&lt;html&gt;标签在内的所有标签</td>
        </tr>
        <tr>
            <td rowspan="4">高级选择器</td>
        </tr>
        <tr>
            <td>后代选择器</td>
            <td>通过标签之间的嵌套关系去选择元素，基本组成部分就是基础选择器</td>
            <td>空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中的祖先级</td>
            <td>通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签</td>
        </tr>
        <tr>
            <td>交集选择器</td>
            <td>通过一个标签之上满足所有的基础选择器的需求去选择标签</td>
            <td>基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头</td>
            <td>选择的是所有基础选择器需求的标签，如果一个条件不满足都不能被选中</td>
        </tr>
        <tr>
            <td>并集选择器</td>
            <td>不同的选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写</td>
            <td>将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号</td>
            <td>是所有的单独选择器选中的标签的并集集合</td>
        </tr>
    </table><br/>
    <h3>5. CSS的继承性是什么?</h3>
    <p>1.如果一个标签没有设置过一些样式，它的某个祖先曾经设置过，在浏览器中改标签也加载了这样的样式，这些样式都是从祖先级继承而来的，这种现象就是继承性(简单来说就是子承父业，从长辈那里继承)。</p>
    <p>2.但能够被继承的样式是所有的<strong>文字相关样式属性</strong>，其他的属性不能被继承。</p>
    <h3>6. 盒子实体化的三属性是什么?</h3>
    <ul>
        <li>在浏览器中想看到一个盒子具体所占的实际位置，需要设置盒子可以实体化的三个属性。</li>
    </ul><br/>
    <table border="1">
        <caption>实体化属性</caption>
        <thead>
            <th>属性名</th>
            <th>属性值</th>
            <th>说明</th>
        </thead>
        <tr>
            <td>width</td>
            <td>px单位的数值</td>
            <td>定义元素占有的宽度</td>
        </tr>
        <tr>
            <td>height</td>
            <td>px单位的数值</td>
            <td>定义元素占有的高度</td>
        </tr>
        <tr>
            <td>background-color</td>
            <td>颜色名、颜色值</td>
            <td>定义元素的背景颜色</td>
        </tr>
    </table>
</body>
</html>